<template>
    <div class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-icon-test"></span>
          <h3>首页</h3>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-leimupinleifenleileibie"></span>
          <h3>分类</h3>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwuche"><van-icon :badge="num" /></span>
          <h3>购物车</h3>
        </router-link>
        <router-link to="/my" tag="li">
          <span class="iconfont icon-wode"></span>
          <h3>我的</h3>
        </router-link>
      </ul>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
import { getCart } from '../api/index.js'
export default {
  data () {
    return {
      num: null
    }
  },
  mounted () {
    this.num = Cookies.get('num')
    getCart({
      userId: Cookies.get('userId')
    }).then(res => {
      this.num = res.data.data.proData.length
      const arr = res.data.data.proData
      this.num = arr.reduce((prev, next) => {
        return prev + next.num
      }, 0)
    })
  }
}
</script>

<style lang="scss">
.footer{
  .van-info{
    position: absolute;
    top: -0.25rem;
    right: 0;
  }
}
</style>
